<template>
  <s-layout class="set-wrap" title="修改密码" :bgStyle="{ color: '#f7f7f7' }" navbar="normal">
    <view class="flex flex-col gap-2 justify-center w-full bg-white">
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">账户</view>
        <input
          type="number"
          placeholder="请输入账号"
          class="text-[1rem] text-[#8A8A8A] text-left w-[70%]"
          v-model="userInfo.mobile"
          disabled
          maxlength="11"
        />
      </view>

      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold flex-none">验证码</view>
        <view class="flex items-center w-[70%] justify-between">
          <input type="number" placeholder="请输入验证码" class="text-[1rem] text-[#8A8A8A]" v-model="state.model.code" maxlength="4" />
          <view
            @click="getSmsCode('changepwd', userInfo.mobile)"
            class="px-2 py-1 rounded-full border-[.0625rem] border-solid border-[#823C08] grid place-items-center flex-none"
          >
            <view class="text-[13px] text-[#823C08]"> {{ getSmsTimer('changepwd') }} </view>
          </view>
        </view>
      </view>
      <view class="h-[2.75rem] bg-[#FFFFFF] rounded-md flex items-center px-4 justify-between">
        <view class="text-[1rem] text-[#181818] font-bold">密码</view>
        <input type="password" placeholder="请输入密码" class="text-[1rem] text-[#8A8A8A] w-[70%]" v-model="state.model.newPassword" />
      </view>
    </view>

    <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="changeLoginPassword">
        <view class="font-medium text-[16px] text-[#FFFFFF]"> 确认修改 </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  // const appInfo = computed(() => sheep.$store('app').info);
  const userInfo = computed(() => sheep.$store('user').userInfo);

  const state = ref({
    list: [],
    loading: true,
    mobile: '',
    code: '',
    password: '',
    model: {
      // oldPassword: '', //旧密码
      newPassword: '', //新密码
      code: '',
    },
  });

  onLoad(() => {});
  function changeLoginPassword() {
    sheep.$api.user
      .changePassword({
        mobile: userInfo.mobile,
        code: state.value.model.code,
        newPassword: state.value.model.newPassword,
      })
      .then((res) => {
        if (res.code === 1) {
          sheep.$store('user').getInfo();
          // closeAuthModal();
          uni.navigateBack({
            delta: 1,
          });
        }
      });
  }
</script>

<style lang="scss" scoped></style>
